<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>epg测试页面</title>

    <script src="./js/jquery.min.js" type="text/javascript"></script>
    <script src="./js/flv.js" type="text/javascript"></script>
    <link media="all" type="text/css" href="./css/h5Player.css" rel="stylesheet">
<body>

<div class="mainContainer" style="width: 500px;
    height: 300px;
    position: relative;
    overflow: hidden;
    background: #000;
    color: #ccc;">
    <video id="videoElement"  class="centeredVideo" width="500"
           height="300"></video>
    <div class="player_control">
        <div class="progress">
            <span class="bufferBar" style="width: 100%;"></span>
            <span class="timeBar" style="width: 100%;"></span>
        </div>
        <div class="time" >
            <span class="current">00:00</span> /
            <span class="duration">00:00</span>
        </div>
        <div class="btmControl">
            <div class="btnPlay btn"></div>
            <div class="volume" >
                <span class="volumeBar"></span>
            </div>
            <div class="sound sound2 btn" ></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //    function drawPic() {
    //        var canvasElement = document.querySelectorAll('canvas')[0];
    //        var ctx = canvasElement.getContext('2d');//设置canvas绘制2d图，
    //        canvasElement.width = 1024;
    //        canvasElement.height = 576;
    //        ctx.drawImage(player, 0, 0, 1024, 576);//将video视频绘制到canvas中
    //    }
    var player = document.getElementById('videoElement');
    var flvPlayer = null;
    if (flvjs.isSupported()) {
        var flvPlayer = flvjs.createPlayer({
        //    "type": "flv", url: "http://10.23.70.35:80/BJXWGQUDI/flv/1515997342.flv"
            "type": "flv", url: "http://10.23.70.35/BJXWGQUDI/flv/1515992480.flv"
        });
        flvPlayer.attachMediaElement(player);

        flvPlayer.load(); //加载
        console.log(JSON.stringify(flvPlayer))
    }

    window.VODCom = window.VODCom || {};
    window.VODCom.H5PlayerControl = function (options) {
        this.volumeDrag = false;
        this.timeDrag = false;
        this.options = options;
        this.initControl();
    }
    VODCom.H5PlayerControl.prototype.initControl = function(){
        var player = this.options.player;
        var parent = this.options.container;
        var array = this.options.controlDisable|| [];
        $.each(array,function(i,element){
            switch (element){
                case "progressBar":
                    parent.find(".progress").hide();
                    break;
                case "timeBar":
                    parent.find(".time").hide();
                    break;
            }
        })
    }

    VODCom.H5PlayerControl.prototype.updateVolume = function (x, vol) {
        var player = this.options.player;
        var parent = this.options.container;
        var volume = parent.find('.volume');
        var percentage;
        if (vol) {
            percentage = vol * 100;
        }
        else {
            var position = x - volume.offset().left;
            percentage = 100 * position / volume.width();
        }
        if (percentage > 100) {
            percentage = 100;
        }
        if (percentage < 0) {
            percentage = 0;
        }
        parent.find('.volumeBar').css('width', percentage + '%');
        player.volume = percentage / 100;

        if (player.volume == 0) {
            parent.find('.sound').removeClass('sound2').addClass('muted');
        }
        else if (player.volume > 0.5) {
            parent.find('.sound').removeClass('muted').addClass('sound2');
        }
        else {
            parent.find('.sound').removeClass('muted').removeClass('sound2');
        }
    }

    VODCom.H5PlayerControl.prototype.playpause = function () {
        var player = this.options.player;
        var parent = this.options.container;
        if (player.paused || player.ended) {
            parent.find('.btnPlay').addClass('paused');
            player.play();
        }
        else {
            parent.find('.btnPlay').removeClass('paused');
            player.pause();
        }
    }

    VODCom.H5PlayerControl.prototype.initVol = function(){
        var player = this.options.player;
        var parent = this.options.container;
        parent.find('.volumeBar').css('width', player.volume * 100 + '%');
    }

    VODCom.H5PlayerControl.prototype.bindEvent = function () {
        var player = this.options.player;
        var parent = this.options.container;
        var self = this;
        parent.hover(function () {
            parent.find('.player_control').stop().animate({'bottom': 0}, 500);
        }, function () {
            if (!self.volumeDrag && !self.timeDrag) {
                parent.find('.player_control').stop().animate({'bottom': -45}, 500);
            }
        })
        parent.find('.sound').click(function () {
            player.muted = !player.muted;
            $(this).toggleClass('muted');
            if (player.muted) {
                parent.find('.volumeBar').css('width', 0);
            }
            else {
                parent.find('.volumeBar').css('width', player.volume * 100 + '%');
            }
        });
        parent.find('.player_control').show().css({'bottom': -45});
        parent.find('.volume').on('mousedown', function (e) {
            self.volumeDrag = true;
            player.muted = false;
            parent.find('.sound').removeClass('muted');
            self.updateVolume(e.pageX);
        });

        parent.find('.btnPlay').on('click', function () {
            self.playpause();
        });
        $(player).bind("click",function(){
            self.playpause();
        })
        $(player).on('ended', function () {
            $('.btnPlay').removeClass('paused');
            player.pause();
        });

        var timeFormat = function(seconds){
            var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
            var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
            return m+":"+s;
        };

        $(player).on('timeupdate', function() {
            var currentPos = player.currentTime;
            var maxduration = player.duration;
            var perc = 100 * currentPos / maxduration;
            parent.find('.timeBar').css('width',perc+'%');
            parent.find('.current').text(timeFormat(currentPos));
            $('.duration').text(timeFormat(maxduration));
        });


        $(document).on('mouseup', function (e) {
            if (self.volumeDrag) {
                self.volumeDrag = false;
                self.updateVolume(e.pageX);
            }
        });
        $(document).on('mousemove', function (e) {
            if (self.volumeDrag) {
                self.updateVolume(e.pageX);
            }
        });
    }

    $(document).ready(function () {
       var control =  new VODCom.H5PlayerControl( { player: player ,container: $(".mainContainer") ,controlDisable:["progressBar","timeBar"] })
        control.bindEvent();
        control.initVol();
    })

</script>

</body>
</html>